---
import whale from "#/assets/images/spline-holders/diving-whale.png"
import trust from "#/assets/images/spline-holders/trust.png"
import { Image } from "astro:assets"
import smallWhale from "../../assets/images/whale.png"
import { renderRichText, renderTitle } from "../../lib/contentful/render.ts"
import H1 from "../typography/h1.astro"

const diver = [
  { id: "union", text: "What is Union?", meter: "200m" },
  { id: "interoperability", text: "What is Interoperability?", meter: "400m" },
  { id: "modularity", text: "What is Modularity?", meter: "600m" },
  { id: "cases", text: "Union Use Cases", meter: "800m" },
  { id: "works", text: "How Union Works", meter: "1000m" },
  { id: "verification", text: "Trust Verification", meter: "1200m" },
  { id: "galois", text: "Galois", meter: "1400m" },
  { id: "bls", text: "CometBLS", meter: "1600m" },
  { id: "voyager", text: "Voyager", meter: "1800m" },
]

const { entries } = Astro.props
---

<div
  class="flex justify-center py-24 text-lg font-mono"
  id="swim-container"
>
  <div class="relative grid grid-cols-2 gap-4 max-w-6xl px-6">
    <div class="flex flex-col col-span-full lg:col-span-1 gap-16 lg:gap-24">
      <div id="union">
        <H1>
          <Fragment set:html={renderTitle(entries.firstTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.firstText)} />
        </div>
      </div>

      <div class="w-full max-w-md">
        <div class="relative aspect-video w-full">
          <video
            src="https://videos.cdn.union.build/radial-glass-v8.mp4"
            autoplay
            muted
            playsinline
            oncanplay="true"
            onloadeddata="true"
            onloadedmetadata="true"
            loop
          >
          </video>
        </div>
      </div>

      <div id="interoperability">
        <H1>
          <Fragment set:html={renderTitle(entries.secondTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.secondText)} />
        </div>
      </div>

      <div class="w-full max-w-sm">
        <div class="relative aspect-video w-full">
          <video
            src="https://videos.cdn.union.build/modular-stack-v2.mp4"
            autoplay
            muted
            playsinline
            oncanplay="true"
            onloadeddata="true"
            onloadedmetadata="true"
            loop
          >
          </video>
        </div>
      </div>

      <div id="modularity">
        <H1>
          <Fragment set:html={renderTitle(entries.thirdTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.thirdText)} />
        </div>
      </div>

      <div id="cases">
        <H1>
          <Fragment set:html={renderTitle(entries.fourthTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.fourthText)} />
        </div>
      </div>

      <div class="w-full max-w-xs">
        <div class="relative aspect-video w-full">
          <video
            src="https://videos.cdn.union.build/explain-v1.mp4"
            autoplay
            muted
            playsinline
            oncanplay="true"
            onloadeddata="true"
            onloadedmetadata="true"
            loop
          >
          </video>
        </div>
      </div>

      <div id="works">
        <H1>
          <Fragment set:html={renderTitle(entries.fifthTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.fifthText)} />
        </div>
      </div>

      <div id="verification">
        <H1>
          <Fragment set:html={renderTitle(entries.sixthTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.sixthText)} />
        </div>
      </div>

      <div class="w-full max-w-sm">
        <div class="relative w-full">
          <Image
            src={trust}
            alt="Trust"
            class="w-full h-full object-cover"
          />
        </div>
      </div>

      <div id="galois">
        <H1>
          <Fragment set:html={renderTitle(entries.seventhTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.seventhText)} />
        </div>
      </div>

      <div id="bls">
        <H1>
          <Fragment set:html={renderTitle(entries.eighthTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.eighthText)} />
        </div>
      </div>

      <div id="voyager">
        <H1>
          <Fragment set:html={renderTitle(entries.ninthTitle)} />
        </H1>
        <div class="flex flex-col md:max-w-[576px] w-full gap-8 mt-4">
          <Fragment set:html={renderRichText(entries.ninthText)} />
        </div>
      </div>

      <div class="w-full max-w-md">
        <div class="relative w-full">
          <Image
            src={whale}
            alt="Whale"
            class="w-full h-full object-cover"
          />
        </div>
      </div>
    </div>

    <div class="relative col-span-1 hidden lg:block">
      <div class="sticky top-0 p-4 pr-0 h-screen max-h-[800px]">
        <div class="flex gap-8 justify-end font-mono h-full pt-4 pb-8">
          <div class="flex flex-col h-full justify-between">
            {
              diver.map((item) => (
                <div class="flex items-center">
                  <a
                    href={`#${item.id}`}
                    class="hover:text-accent-500 py-2 transition-colors duration-200"
                  >
                    {item.text}
                  </a>
                </div>
              ))
            }
          </div>
          <div
            class="flex dive-gradient h-full min-w-7 relative"
            id="swim-lane"
          >
            <Image
              id="scrolling-dot"
              src={smallWhale}
              alt="small whale"
              class="absolute w-10"
            />
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
  function initScrollHandler() {
    const dot = document.getElementById("scrolling-dot")
    const swimlane = document.getElementById("swim-lane")

    if (!dot || !swimlane) {
      return
    }

    const updateDotPosition = () => {
      const documentHeight = document.documentElement.scrollHeight
      const viewportHeight = window.innerHeight
      const maxScroll = documentHeight - viewportHeight
      const scrollPercentage = window.scrollY / maxScroll

      const maxDotPosition = swimlane.offsetHeight - dot.offsetHeight
      const newPosition = scrollPercentage * maxDotPosition

      dot.style.transform = `translateY(${Math.max(0, Math.min(maxDotPosition, newPosition))}px)`
    }

    // Throttled scroll handler using requestAnimationFrame
    let isScrolling = false
    const scrollHandler = () => {
      if (!isScrolling) {
        requestAnimationFrame(() => {
          updateDotPosition()
          isScrolling = false
        })
        isScrolling = true
      }
    }

    window.addEventListener("scroll", scrollHandler, { passive: true })
    setTimeout(updateDotPosition, 0) // Initial position

    return () => window.removeEventListener("scroll", scrollHandler)
  }

  // Initialize scroll handler
  const setup = () => {
    const cleanup = initScrollHandler()
    document.addEventListener("astro:before-preparation", cleanup, {
      once: true,
    })
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", setup)
  } else {
    setup()
  }

  document.addEventListener("astro:page-load", setup)
  </script>

  <style>
  .dive-gradient {
    background: linear-gradient(
      180deg,
      #ffffff 4%,
      #a0ecfd 7.13%,
      #030711 56%,
      #000000 100%
    );
  }
  </style>
</div>
